const tbodyBox = document.querySelector('.list')

const bsModal = new bootstrap.Modal(document.getElementById('modal'))

let studentId = 0

// 软件设计原则：开闭原则，对新增开放，对修改关闭  - 解耦

// =====操作数据 - 和服务器打交道====
// 1. 向服务器获取学生列表数据
async function getStudentsData() {
    try {
        let res = await axios({ url: '/students' })
        return res  // {message:'',data:[{}]}
    } catch (error) {
        pxmu.fail(error.response && error.response.data.message || '获取学生数据异常，检查网络')
    }
}

// 2. 完成学生编辑功能，相关的数据接口需要封装5个方法
// 2.1 获取省  - 无参
async function getProvinceData() {
    try {
        let data = sessionStorage.getItem('prov')
        if (data) {
            return JSON.parse(data)
        } else {
            data = await axios({ url: '/api/province' }) // {message：'',list:['','']}
            sessionStorage.setItem('prov', JSON.stringify(data))
            return data
        }

    } catch (error) {
        pxmu.fail(error.response && error.response.data.message || '获取省份数据异常，检查网络')
    }
}
// 2.2 获取市  - 需要传入省名称
async function getCityData(pname) {
    try {
        let data = sessionStorage.getItem(pname)
        if (data) {
            return JSON.parse(data)
        } else {
            data = await axios({ url: '/api/city?pname=' + pname }) // {message：'',list:['','']}
            sessionStorage.setItem(pname, JSON.stringify(data))
            return data
        }


    } catch (error) {
        pxmu.fail(error.response && error.response.data.message || '获取城市数据异常，检查网络')
    }
}
// 2.3 区 -  - 需要传入省和市名称
async function getAreaData(pname, cname) {
    try {
        let data = sessionStorage.getItem(pname + cname)
        if (data) {
            return JSON.parse(data)
        } else {
            data = await axios({ url: `/api/area?pname=${pname}&cname=${cname}` }) // {message：'',list:['','']}        
            sessionStorage.setItem(pname + cname, JSON.stringify(data))
            return data
        }

    } catch (error) {
        pxmu.fail(error.response && error.response.data.message || '获取地区数据异常，检查网络')
    }
}
// 2.4 根据id获取学生的详情老数据
async function getStudentInfoData(id) {
    try {
        return await axios({ url: `/students/${id}` }) // {message：'',data:{}}        
    } catch (error) {
        pxmu.fail(error.response && error.response.data.message || '获取学生详情异常，检查网络')
    }
}
// 2.5 修改学生的详情数据
async function putStudentInfoData(id, body) {
    try {
        return await axios({ url: `/students/${id}`, method: 'PUT', data: body }) // {message：'',data:[{},{}']}        
    } catch (error) {
        pxmu.fail(error.response && error.response.data.message || '修改学生详情异常，检查网络')
    }
}

// 3. 新增学生数据
async function AddStudentInfoData(body) {
    try {
        return await axios({ url: `/students/`, method: 'POST', data: body }) // {message：'',data:[{},{}']}        
    } catch (error) {
        pxmu.fail(error.response && error.response.data.message || '新增学生详情异常，检查网络')
    }
}


// =====渲染界面 -- 和界面打交道=====
// 1. 渲染学生数据到表格中
async function renderStudents() {
    let { data } = await getStudentsData()
    console.log(data)

    let str = ''
    data.forEach(item => {
        str += `
        <tr>
        <td>${item.name}</td>
        <td>${item.age}</td>
        <td>${item.gender == 0 ? '男' : '女'}</td>
        <td>第${item.group}组</td>
        <td>${item.hope_salary}</td>
        <td>${item.salary}</td>
        <td>${item.province}${item.city}${item.area}</td>
        <td>
        <a href="javascript:;" class="text-success mr-3"><i class="bi bi-pen" data-id="${item.id}"></i></a>
        <a href="javascript:;" class="text-danger"><i class="bi bi-trash"></i></a>
        </td>
    </tr>
        `
    })

    tbodyBox.innerHTML = str
}

// 2. 渲染省，市，区三个数据到界面上
const provinceBox = document.querySelector('[name=province]')

async function renderProvince() {
    const { list } = await getProvinceData()
    let str = ''
    list.forEach(name => {
        str += `<option value="${name}">${name}</option>`
    })

    provinceBox.innerHTML = `<option value="">--省份--</option>${str}`
}

const cityBox = document.querySelector('[name=city]')
async function renderCity(pname) {
    const { list } = await getCityData(pname)
    let str = ''
    list.forEach(name => {
        str += `<option value="${name}">${name}</option>`
    })

    cityBox.innerHTML = `<option value="">--城市--</option>${str}`
}

const areaBox = document.querySelector('[name=area]')
async function renderArea(pname, cname) {
    const { list } = await getAreaData(pname, cname)
    let str = ''
    list.forEach(name => {
        str += `<option value="${name}">${name}</option>`
    })

    areaBox.innerHTML = `<option value="">--地区--</option>${str}`
}

// ====各种事件  -- 和用户打交道====
// 1.1 编辑事件
function registerClickHanderForTbody() {
    tbodyBox.addEventListener('click', async function (e) {

        // 这个方法中即可做编辑也可以做删除
        // 如何判断现在是点击了编辑按钮
        if (e.target.className == 'bi bi-pen') {
            // alert('编辑')
            studentId = e.target.dataset.id
            // alert(e.target.dataset.id)
            // 1. 根据id获取学生的老数据
            const { data } = await getStudentInfoData(studentId)

            // 2. 数据回显到页面
            for (key in data) {
                if (key == 'gender') {
                    const genderBox = document.querySelectorAll(`[name=${key}]`)
                    // console.log(genderBox);
                    genderBox[data[key]].checked = true

                } else {
                    const box = document.querySelector(`[name=${key}]`)
                    if (box) {
                        box.value = data[key]
                    }
                }
            }

            // 3. 显示用户所在的省，市，区
            let { province, city, area } = data
            // console.log(province,city,area);
            provinceBox.value = province

            await renderCity(province)
            // 回显城市
            cityBox.value = city

            await renderArea(province, city)
            areaBox.value = area

            // 打开模态框
            bsModal.show()
        }

        if (e.target.className == 'bi bi-trash') {
            alert('删除')
        }

    })

}

// 2. 注册省份和市区select的change事件
provinceBox.addEventListener('change', function (e) {
    // alert(e.target.value)
    // 1. 获取用户选择的省
    let pname = e.target.value
    // 2. 调用 renderCity
    renderCity(pname)
})

cityBox.addEventListener('change', function (e) {
    // alert(e.target.value)
    // 1. 获取用户选择的省
    let cname = e.target.value
    // 2. 调用 renderCity
    renderArea(provinceBox.value, cname)
})

const btnSubmitBox = document.querySelector('#submit')
const formBox = document.querySelector('#form')
btnSubmitBox.addEventListener('click', async function (e) {
    //  收集表单数据
    let body = serialize(formBox, { hash: true, empty: true })
    body.age = +body.age
    body.gender = +body.gender
    body.group = +body.group
    body.hope_salary = +body.hope_salary
    body.salary = +body.salary
    console.log(body);

    if (studentId > 0) {
        // 调用putStudentInfoData完成数据的修改
        await putStudentInfoData(studentId, body)

        //  关闭模态框+刷新列表数据
        bsModal.hide()
        studentId = 0
        renderStudents()
    } else {
        // 新增
        await AddStudentInfoData(body)
        bsModal.hide()
        renderStudents()
    }
})

// 点击新增按钮打开模态框
document.querySelector('#openModal').addEventListener('click', function () {
    bsModal.show()
})

// ==== 页面进入时，各种方法调用初始化====
renderStudents()
registerClickHanderForTbody()
renderProvince()
